/* 按钮基础样式 */
.button {
  @apply inline-flex items-center justify-center font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden;
  
  /* 防止文本选择 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 按钮尺寸 */
.button--small {
  @apply px-3 py-1.5 text-sm;
  min-height: 32px;
}

.button--medium {
  @apply px-4 py-2 text-base;
  min-height: 40px;
}

.button--large {
  @apply px-6 py-3 text-lg;
  min-height: 48px;
}

/* 按钮变体 */
.button--primary {
  @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.button--secondary {
  @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
}

.button--success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.button--warning {
  @apply bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
}

.button--error {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.button--info {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

/* 深色模式适配 */
.dark .button--secondary {
  @apply bg-gray-700 text-gray-100 hover:bg-gray-600;
}

/* 按钮状态 */
.button--disabled {
  @apply cursor-not-allowed opacity-50;
  pointer-events: none;
}

.button--loading {
  @apply cursor-wait;
  pointer-events: none;
}

.button--full-width {
  @apply w-full;
}

.button--icon-only {
  @apply p-2;
  min-width: 40px;
}

.button--icon-only.button--small {
  @apply p-1.5;
  min-width: 32px;
}

.button--icon-only.button--large {
  @apply p-3;
  min-width: 48px;
}

/* 按钮内容 */
.content {
  @apply flex-1;
}

.icon {
  @apply flex-shrink-0 flex items-center justify-center;
}

.button--small .icon {
  @apply w-4 h-4;
}

.button--medium .icon {
  @apply w-5 h-5;
}

.button--large .icon {
  @apply w-6 h-6;
}

/* 图标间距 */
.icon + .content {
  @apply ml-2;
}

.content + .icon {
  @apply ml-2;
}

.button--icon-only .icon + .content,
.button--icon-only .content + .icon {
  @apply ml-0;
}

/* 加载动画 */
.loadingSpinner {
  @apply absolute inset-0 flex items-center justify-center;
}

.spinner {
  @apply animate-spin;
  width: 1em;
  height: 1em;
}

.button--small .spinner {
  width: 0.875rem;
  height: 0.875rem;
}

.button--large .spinner {
  width: 1.25rem;
  height: 1.25rem;
}

.spinnerCircle {
  @apply stroke-current;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: spinner-dash 2s linear infinite;
}

@keyframes spinner-dash {
  0% {
    stroke-dashoffset: 60;
  }
  50% {
    stroke-dashoffset: 15;
  }
  100% {
    stroke-dashoffset: 60;
  }
}

/* 加载状态时隐藏内容 */
.button--loading .content,
.button--loading .icon {
  @apply opacity-0;
}

/* 悬停效果 */
.button:hover:not(.button--disabled):not(.button--loading) {
  @apply transform -translate-y-0.5 shadow-md;
}

.button:active:not(.button--disabled):not(.button--loading) {
  @apply transform translate-y-0 shadow-sm;
}

/* 焦点效果 */
.button:focus-visible {
  @apply ring-2 ring-offset-2;
}

/* 链接样式的按钮 */
a.button {
  @apply no-underline;
  text-decoration: none;
}

a.button:hover {
  text-decoration: none;
}

/* 波纹效果 */
.button::before {
  content: '';
  @apply absolute inset-0 bg-white opacity-0 rounded-md transition-opacity duration-200;
  pointer-events: none;
}

.button:active::before {
  @apply opacity-20;
}

.button--primary::before,
.button--success::before,
.button--warning::before,
.button--error::before,
.button--info::before {
  @apply bg-white;
}

.button--secondary::before {
  @apply bg-gray-900;
}

.dark .button--secondary::before {
  @apply bg-white;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .button {
    @apply text-sm;
  }
  
  .button--large {
    @apply px-4 py-2 text-base;
    min-height: 44px;
  }
  
  .button--medium {
    @apply px-3 py-1.5 text-sm;
    min-height: 36px;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .button {
    @apply border-2 border-current;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .button {
    @apply transition-none;
  }
  
  .button:hover {
    @apply transform-none;
  }
  
  .spinner {
    @apply animate-none;
  }
}
